<template>
    <div class="tags-nav">

        <div class="close-con">
            <el-dropdown class="menu-dropdown" @command="handleCommandClose">
                <span class="el-dropdown-link">
                    <i class="el-icon-close"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="close-all">关闭所有</el-dropdown-item>
                    <el-dropdown-item command="close-others">关闭其他</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <div class="btn-con left-btn">
            <el-button type="text" icon="el-icon-arrow-left" @click="handleScroll(240)"></el-button>
        </div>
        <div class="btn-con right-btn">
            <el-button type="text" icon="el-icon-arrow-right" @click="handleScroll(-240)"></el-button>
        </div>

        <div class="scroll-outer" ref="scrollOuter" @DOMMouseScroll="handlescroll" @mousewheel="handlescroll">
            <div ref="scrollBody" class="scroll-body" :style="{left: tagBodyLeft + 'px'}">
                <el-tag 
                    class="ivu-tag" 
                    ref="tagsPageOpened" 
                    v-for="(item, index) in tagNavList" 
                    @close="handleClose(item)" 
                    @click.native="handleClick(item)" 
                    :closable="item.name === 'home' ? false : true" 
                    :text="item.name" 
                    :type="isCurrentTag(item) ? 'primary' : 'info'" 
                    :key="`tag-nav-${index}`">
                    <i class="icon el-icon-mars-dot1" :style="{color: isCurrentTag(item) ? '#409eff' : '#ccc'}"></i>
                    <span class="text">{{item.meta.title}}</span>
                </el-tag>
            </div>
        </div>

    </div>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
import {
    getNewTagList,
    getNextRoute,
    routeEqual,
    showTitle
} from "@/libs/router_utils.js";
export default {
    name: "TagsNav",
    data() {
        return {
            tagBodyLeft: 0,
            rightOffset: 40,
            outerPadding: 4
        };
    },
    computed: {
        tagNavList() {
            return this.$store.state.app.tagNavList;
        },
        currentRouteObj() {
            const { name, params, query } = this.$route;
            return { name, params, query };
        }
    },
    methods: {
        ...mapMutations(["setTagNavList", "addTag"]),
        handlescroll(e) {
            var type = e.type;
            let delta = 0;
            if (type === "DOMMouseScroll" || type === "mousewheel") {
                delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
            }
            this.handleScroll(delta);
        },
        handleScroll(offset) {
            const outerWidth = this.$refs.scrollOuter.offsetWidth;
            const bodyWidth = this.$refs.scrollBody.offsetWidth;
            if (offset > 0) {
                this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset);
            } else {
                if (outerWidth < bodyWidth) {
                    if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {
                        this.tagBodyLeft = this.tagBodyLeft;
                    } else {
                        this.tagBodyLeft = Math.max(
                            this.tagBodyLeft + offset,
                            outerWidth - bodyWidth
                        );
                    }
                } else {
                    this.tagBodyLeft = 0;
                }
            }
        },
        isCurrentTag(item) {
            return routeEqual(this.currentRouteObj, item);
        },
        handleClick(item) {
            this.$router.push({ path: item.path });
            this.turnToPage(item);
        },
        turnToPage(route) {
            let { name, params, query } = {};
            if (typeof route === "string") name = route;
            else {
                name = route.name;
                params = route.params;
                query = route.query;
            }
            if (name.indexOf("isTurnByHref_") > -1) {
                window.open(name.split("_")[1]);
                return;
            }
            this.$router.push({
                name,
                params,
                query
            });
        },
        handleClose(current) {
            let res = this.tagNavList.filter(
                item => !routeEqual(current, item)
            );
            this.handleCloseTag(res, undefined, current);
        },
        handleCloseTag(res, type, route) {
            let openName = "";
            if (type === "all") {
                this.turnToPage("home");
                openName = "home";
            } else if (routeEqual(this.$route, route)) {
                if (type === "others") {
                    openName = route.name;
                } else {
                    const nextRoute = getNextRoute(this.tagNavList, route);
                    this.$router.push(nextRoute);
                    openName = nextRoute.name;
                }
            }
            this.setTagNavList(res);
        },
        handleCommandClose(command) {
            if (command === "close-all") {
                // 关闭所有，除了home
                let res = this.tagNavList.filter(item => item.name === "home");
                this.handleCloseTag(res, "all");
            } else if (command === "close-others") {
                // 关闭除当前页和home页的其他页
                let res = this.tagNavList.filter(
                    item =>
                        routeEqual(this.currentRouteObj, item) ||
                        item.name === "home"
                );
                this.handleCloseTag(res, "others", this.currentRouteObj);
                setTimeout(() => {
                    this.getTagElementByName(this.currentRouteObj.name);
                }, 100);
            }
        },
        moveToView(tag) {
            const outerWidth = this.$refs.scrollOuter.offsetWidth;
            const bodyWidth = this.$refs.scrollBody.offsetWidth;
            if (bodyWidth < outerWidth) {
                this.tagBodyLeft = 0;
            } else if (tag.offsetLeft < -this.tagBodyLeft) {
                // 标签在可视区域左侧
                this.tagBodyLeft = -tag.offsetLeft + this.outerPadding;
            } else if (
                tag.offsetLeft > -this.tagBodyLeft &&
                tag.offsetLeft + tag.offsetWidth <
                    -this.tagBodyLeft + outerWidth
            ) {
                // 标签在可视区域
                this.tagBodyLeft = Math.min(
                    0,
                    outerWidth -
                        tag.offsetWidth -
                        tag.offsetLeft -
                        this.outerPadding
                );
            } else {
                // 标签在可视区域右侧
                this.tagBodyLeft = -(
                    tag.offsetLeft -
                    (outerWidth - this.outerPadding - tag.offsetWidth)
                );
            }
        },
        getTagElementByName(name) {
            this.$nextTick(() => {
                this.refsTag = this.$refs.tagsPageOpened;
                this.refsTag.forEach((item, index) => {
                    if (name === item.text) {
                        let tag = this.refsTag[index].$el;
                        this.moveToView(tag);
                    }
                });
            });
        }
    },
    mounted() {
        this.setTagNavList();
        this.addTag({
            route: this.$store.state.app.homeRoute
        });
    },
    watch: {
        $route(newRoute) {
            let hideInTags = newRoute.meta.hideInTags

            //判断是否不显示TagNav
            if(hideInTags == undefined) {
                this.setTagNavList(getNewTagList(this.tagNavList, newRoute));
                this.getTagElementByName(newRoute.name);
            }
            
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "./tags-nav.scss";
</style>